<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				display: inline-block;
				background: #999;
				border-radius: 5px;
				height: 10px;
				width: 10px;
				margin: 10px;
			}
			li.cur{
				background: #333;
			}
			img{
				transition: 3s;
			}
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
				transition: .3s;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<p id="info">一共 5 张图片，当前第 1 张</p>
			<img src="img/1.jpg" id="img" alt="冰棍" />
			<ul id="box"></ul>
			<button id="prev" onclick="onPrev()">上一张</button>
			<button id="next" onclick="onNext()">下一张</button>
		</div>
		<script>
				var imgarr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
				var imgid = document.getElementById('img');
				var prev = document.getElementById('prev');
				var info = document.getElementById('info');
				var ulbox = document.getElementById('box');
				var i = 0;
				/*
				 -======================================================
				 */
				info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
				for (var j = 0; j < imgarr.length; j++) {
					if (j == 0) {
						ulbox.innerHTML += '<li class="cur"></li>'
					} else {
						ulbox.innerHTML += '<li></li>'
					}
				}
				// 通过标签名获取
				var libox = ulbox.getElementsByTagName('li')
				/*
				 -======================================================
				 */
				// 定时轮播
				
				// setInterval(方法,定时多少)
				setInterval(function(){
					i++;
					// 判断是否是最后一张 将i设置为第一张继续下轮轮播
					if (i > imgarr.length - 1) {
						i = 0
					}
					imgid.src = 'img/'+imgarr[i]
					info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
					
					for (var j = 0; j < libox.length; j++) {
						if (j == i) {
							libox[j].className = 'cur'
						} else {
							libox[j].className = ''
						}
					}
				}, 3000)
				/* 
				 -======================================================
				 */
				// 上一张图
				function onPrev() {
					imgid.style.marginLeft = 0
					// 判断是否是第一张  将i设置为最后一张继续下轮轮播
					i--;
					if (i <= 0) {
						i = imgarr.length - 1 //可以获取最后一张图
					}
					imgid.src = 'img/'+imgarr[i]
					info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
					
					for (var j = 0; j < libox.length; j++) {
						if (j == i) {
							libox[j].className = 'cur'
						} else {
							libox[j].className = ''
						}
					}
				}
				/*
				 -======================================================
				 */
				// 下一张图
				function onNext() {
					i++;
					// 判断是否是最后一张 将i设置为第一张继续下轮轮播
					if (i > imgarr.length - 1) {
						i = 0
					}
					imgid.src = 'img/'+imgarr[i]
					info.innerText = '一共'+imgarr.length+'张图片,' + '当前第 '+(i+1)+' 张'
					
					// 轮播图位置标记
					for (var j = 0; j < libox.length; j++) {
						// 判断当前位置的下标和元素的下标是否相等，相等加className='cur'，不相等置空
						if (j == i) {
							libox[j].className = 'cur'
						}else {
							libox[j].className = ''
						}
					}
				}
		</script>
	</body>
</html>
